<!--
/**
* Author: KSJ
* Date: 2022-07-22 11:52
* Desc: 商品详情
*/
-->
<template>
  <yy-page>
    <view class="bc-white tab-wrap flex">
      <view class="tab-item" @click="changeFilm">影票订单</view>
      <view class="tab-item active">商品订单</view>
      <view v-if="open" class="tab-item" @click="changeMallBuy">点餐订单</view>
    </view>
    <view class="order-list">
      <yy-list :list="listData" :loading="listLoading" :finished="listFinished" empty-type="order">
        <view>
          <goods-order-item custom-class="mb20" @click="toDetail(item)" v-for="(item, index) in listData" :key="index" :obj="item" />
        </view>
      </yy-list>
    </view>
  </yy-page>
</template>

<script>
  import GoodsOrderItem from './components/GoodsOrderItem'
  import pageMixins from '@/mixins/pageMixins'
  import listMixins from '@/mixins/listMixins'
  import { deDupArray } from '@/utils'
  export default {
    mixins: [pageMixins, listMixins],
    components: {
      GoodsOrderItem
    },
    data() {
      return {
        open: false,
        reFresh: ''
      }
    },
    onLoad() {
      this.listLoad()
      this.getSet()
    },
    watch: {
      //监听reFresh,如果有修改就执行监听器
      reFresh: function () {
        this.listRefresh()
        console.log('页面已重新加载')
      }
    },
    methods: {
      onloadList() {
        const query = { ...this.search, ...this.pageInfo }
        return uni.$api.mall.getOrderList(query).then((res) => {
          if (this.isLoading) {
            // 是下啦刷新 清空
            this.listData = []
          }
          const listData = [...this.listData, ...res.list]
          this.listData = deDupArray(listData, 'orderId')
          return res
        })
      },
      getSet() {
        uni.$api.orderFood.getSet({ cinemaId: this.$auth.getLocCinemaInfo().cinemaId }).then((res) => {
          this.open = res.open
        })
      },
      onPullDownRefresh() {
        this.listRefresh()
      },
      onReachBottom() {
        this.listLoad()
      },
      // 去详情页
      toDetail(item) {
        console.log(item)
        // todo
        // this.$uMeng.trackEvent('view_my_order_details')
        const query = {
          orderId: item.orderId,
          type: 'mall',
          title: 'detail'
        }
        this.$tools.navigateTo('/pagesOrder/order/detail', query)
      },
      changeFilm() {
        this.$tools.navigateTo('/pagesOrder/order/filmList', {}, 'redirectTo')
      },
      changeMallBuy() {
        this.$tools.navigateTo('/pagesOrder/order/mallBuyList', {}, 'redirectTo')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tab-wrap {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    height: 88rpx;
    z-index: 10;
    .tab-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .active {
      color: $mainColor;
      font-weight: bold;
      position: relative;
      &::before {
        content: '';
        width: 30rpx;
        height: 6rpx;
        background: $mainColor;
        position: absolute;
        left: 50%;
        bottom: 10rpx;
        margin-left: -15rpx;
      }
    }
  }
  .order-list {
    min-height: 100vh;
    overflow-x: hidden;
    background: #f3f5f7;
    box-sizing: border-box;
    padding: 108rpx 20rpx 0;
  }
</style>
